const { defineConfig } = require('@vue/cli-service')
// 需要排除的包对象
let externals = {}
// 第一步:需要配置的 CDN 链接
let CDN = { css: [], js: [] }
// 判断是否是生产环境
const isProduction = process.env.NODE_ENV === 'production' // 返回true或false,来判断是否处于生成环境
// 如何是生产环境，需要执行以下逻辑
if (isProduction) {
  externals = {
    /**
      * externals 对象属性解析：
      * '包名': '在项目中引入的名字'  包名指的是下载时的包的名字(key)   value是在项目使用时定义的变量名字
      * 以 element-ui 举例 我再 main.js 里是以
      * import ELEMENT from 'element-ui'
      * Vue.use(ELEMENT)
      * 这样引入的，所以我的 externals 的属性值应该是 ELEMENT
      * 一定要去main.js设置
    */
    echarts: 'echarts',
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    axios: 'axios',
    dayjs: 'dayjs',
    'element-ui': 'ELEMENT', // element-ui定义时的变量名字要改为ELEMENT,因为cdn里的源代码配置在ELEMENT这个变量上
    'vue-quill-editor': 'VueQuillEditor',
    'vuex-persistedstate': 'createPersistedState'
  }
  // 第二步:CDN加速外链(如果是生产环境就覆盖掉之前的空对象(开发环境用))
  CDN = {
    css: [
      'https://unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css',
      'https://unpkg.com/quill@1.3.7/dist/quill.core.css',
      'https://unpkg.com/quill@1.3.7/dist/quill.snow.css',
      'https://unpkg.com/quill@1.3.7/dist/quill.bubble.css'
    ],
    js: [
      'https://unpkg.com/echarts@5.4.3/dist/echarts.min.js',
      'https://unpkg.com/vue@2.6.14/dist/vue.js',
      'https://unpkg.com/vue-router@3.5.1/dist/vue-router.js',
      'https://unpkg.com/vuex@3.6.2/dist/vuex.js',
      'https://unpkg.com/axios@1.5.0/dist/axios.min.js',
      'https://unpkg.com/dayjs@1.11.10/dayjs.min.js',
      'https://unpkg.com/element-ui@2.15.14/lib/index.js',
      'https://unpkg.com/quill@1.3.7/dist/quill.js',
      'https://unpkg.com/vue-quill-editor@3.0.6/dist/vue-quill-editor.js',
      'https://unpkg.com/vuex-persistedstate@3.2.1/dist/vuex-persistedstate.umd.js'
    ]
  }
}
module.exports = defineConfig({
  transpileDependencies: true,
  /*
  打包出现的问题:
  问题:打包之后形成dist文件夹,打开里面的index.html出现404问题
  原因:
    1.默认打包,index.html引入其他打包的文件时使用的是"绝对路径"
      地址是以"/"开头(要找到当前index.html打开时所在的服务器根地址(文件夹))
      就是确保vsCode+liserver插件打开之后,vsCode根目录就得直接是dist文件夹
      (但是一般运维上线项目时,服务器会有多个项目,不可能会将其中一个dist作为根目录)

    解决:
    1.webpack提议在vue.config.js中配置一个publicPath:'./'(控制index.html引入其他资源时的前缀地址)
    2.publicPath的默认值是'/',这个是在开发环境时使用的(绝对地址). 生产环境需要上线,需要改为'./'(相对地址)
  */
  // publicPath: './' //写法不建议
  // 使用node.js提供的写法来判断当前所处的环境,从而决定使用声明路径
  // 如果运行的是npm run serve   process.env.NODE_ENV值就是'development'
  // 如果运行的是npm run build   process.env.NODE_ENV值就是'production'
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  configureWebpack: {
  //  为空对象就是开发环境,会走node_modules引入第三方包,否则就是生产环境,走CDN外链
    externals: externals // 让webpack打包时,排除掉不需要打包的配置(之后在index.html中引入外部CDN链接,重新打包即可)
  },
  // 第三步:使用webpack插件,访问html的那个插件,注入CDN
  chainWebpack (config) {
    // 注入CDN变量(打包时会执行)
    config.plugin('html').tap(args => {
      args[0].cdn = CDN
      return args
    })
  }
  // lintOnSave: false  //关闭eslint校验
})

/*
排除了第三方的包之后,因为在index.html中引入了外链CDN的链接,所以打包后的index.HTML能够访问,
开发环境项目运行也能访问,但是在开发环境,第一次浏览器打开项目页面时因为要去外链请求CDN地址,打开速度有点慢(首次之后就不会了)

目的:让webpack在开发环境时还是在node_modules中引入第三方包,打包后才在CDN外链引入
解决:通过 process.env.NODE_ENV  的值来判断处于什么环境,从而决定采用哪种方式引入包(不排除包就是开发环境,会走node_modules)
问题:如果在开发环境,externals为空对象,但是index.html还是引入了CDN链接,则外链和node_modules会产生冲突从而报错
解决问题:
一共四步,vue.config.js里三步,index.html里一步
*/
